<template>
	<view class="login-content">
		<view class="logo-box"
			:style="{background: `url(${baseImgUrl}images_bg.png) no-repeat;background-size: cover`}">
			<view class="logo">
				<image class="logo-img" :src="baseIconUrl + 'icon_logo.png'" mode="aspectFit" />
			</view>
		</view>
		<view class="btn-box">
			<button class="phone-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">手机号快捷登录</button>
			<!-- <view class="phone-btn" @click="clickLogin">
        微信授权登录
      </view> -->
		</view>
		<view class="other-login-box">
			<view class="other-item" v-for="(item, index) in otherLoginConfig" :key="index"
				@click="clickOtherLogin(item)">
				<view class="icon-box">
					<image class="icon-img" :src="baseIconUrl + item.icon" mode="aspectFill" />
				</view>
				<view class="name">{{ item.name }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		baseIconUrl,
		baseImgUrl
	} from '@/config'
	export default {
		name: 'Login',
		data() {
			return {
				baseIconUrl,
				baseImgUrl,
				storeId: '',
				otherLoginConfig: [{
						name: '商家登录',
						key: 'business',
						icon: 'icon_merchant.png'
					},
					{
						name: '供应商登录',
						key: 'supplier',
						icon: 'icon_supplier.png'
					}
				]
			}
		},
		onLoad(query) {
			const q = decodeURIComponent(query.q) // 获取到二维码原始链接内容
			// const scancode_time = parseInt(query.scancode_time) //获取用户扫码时间 UNIX 时间戳
			let dataArr = q.split("=")
			console.log('传递的storeId', dataArr[1])
			if (query) {
				this.storeId = dataArr[1]
			}
		},
		methods: {
			clickLogin() {
				uni.switchTab({
					url: '/pages/index'
				})
			},
			clickOtherLogin(item) {
				uni.redirectTo({
					url: `/subPages/home/formLogin?type=${item.key}`
				})
			},
			async getPhoneNumber(e) {
				if (e.mp.detail.errMsg === 'getPhoneNumber:ok') {
					const loginRes = await uni.login()
					if (loginRes[1].code) {
						const params = {
							code: loginRes[1].code,
							phoneCode: e.detail.code,
							encryptedData: e.detail.encryptedData,
							iv: e.detail.iv,
							sessionKey: ""
						}
						const res = await this.$POST('/loginOpenid', params)
						console.log(res)
						if (res.code === 200) {
							uni.setStorageSync('token', res.token)
							uni.setStorageSync('roleId', '')
							const data = {
								phoneNumber: e.detail.code,
								storeId: this.storeId
							}
							const res2 = await this.$GET('/getInfo')
							const res3 = await this.$POST('/fx/user/becomeDistributeMember', data)
							console.log(res3)
							if (res3.code == 200) {
								console.log('分销绑定成功', res3)
							}
							if (res2.code == 200) {
								uni.showToast({
									icon: 'success',
									title: '登录成功',
									duration: 2000
								})
								console.log('用户个人信息', res2)
								this.$store.commit('SET_USERINFO', res2.user)
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/index'
									})
								}, 2000)
							}
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: '登录失败'
						})
						console.log('登录失败！' + loginRes.errMsg)
					}
				} else {
					// 用户拒绝授权
					console.log('用户拒绝授权')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-content {
		height: 100vh;
		background-color: #FFF;
	}

	.logo-box {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		height: 738rpx;

		// background-color: #f5f9f8;
		.logo {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 140rpx;
			height: 140rpx;
			margin-bottom: 52rpx;

			// background-color: #025e49;
			.logo-img {
				height: 140rpx;
			}
		}
	}

	.btn-box {
		margin-top: 216rpx;
		text-align: center;

		.phone-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 88rpx;
			margin: 0 66rpx;
			border-radius: 44rpx;
			font-size: 30rpx;
			color: #FFF;
			background-color: #0b3f35;
		}
	}

	.other-login-box {
		position: fixed;
		bottom: 140rpx;
		padding: 0 180rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;

		.other-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.icon-box {
				width: 88rpx;
				height: 88rpx;
				border-radius: 44rpx;

				.icon-img {
					width: 100%;
					height: 100%;
				}
			}

			.name {
				margin-top: 12rpx;
				font-size: 24rpx;
				color: #999;
			}
		}
	}
</style>